<template>
    <div class="sex">
        <div class="title">
            <p class="">男女比例</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="grander">
            <div class="man">
                <p>男士</p>
                <img src="../../images/man.png" alt="">
            </div>
            <div class="woman">
                <p>女士</p>
                <img src="../../images/woman.png" alt="">
            </div>
        </div>
        <div class="rate">
            <p>男士58%</p>
            <p>女士42%</p>
        </div>
        <div class="echart" ref="echart"></div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

let echart=ref()
onMounted(()=>{
    let myEchart=echarts.init(echart.value)
    myEchart.setOption({
       
        xAxis:{
            show:false,
            min:0,
            max:100
        },
        yAxis:{
            show:false,
            type:'category'
        },
        series:[
            // 男士比例
            {
                type:'bar',
                data:[58],
                z:100,
                itemStyle:{
                    borderRadius:20
                } 
            },
            //女士比例
            {
                type:'bar',
                data:[100],
                barGap:'-100%',
                itemStyle:{
                    borderRadius:20,
                    color:'pink'
                }
            },
            
        ]

    })
})
</script>

<style scoped lang='scss'>
    .sex{
        
        width: 100%;
        flex: 1;
        background: url('../../images/dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        .title{
            margin-left: 10px;
            p{
                color: white;
                font-size: 20px;
            }
            
        }
        .grander{
            display: flex;
            justify-content: center;
            margin-top: 10px;
            p{
                color:white;
            }
            .man{
                display: flex;
                flex-direction: column;
                gap: 32px;
                align-items: center;
                justify-content: center;
                width: 111px;
                height: 115px;
                margin: 20px;
                background: url('../../images/man-bg.png');
                
            }
            .woman{
                display: flex;
                flex-direction: column;
                gap: 32px;
                align-items: center;
                justify-content: center;
                width: 111px;
                height: 115px;
                margin: 20px;
                background: url('../../images/woman-bg.png');
            }

        }
        .rate{
            width: 100%;
            display: flex;
            justify-content: center;
            color: white;
            p{
                margin: 0 50px;
            }
        }
        .echart{
            height: 100px;
            
        }
    }
</style>